<template>
  <div class="teacher-container">
    <div class="top-content">
      <a-card class="card data">
        <template #title>
          <div class="topInfo">
            <span class="title">我的质检工作统计</span>
            <a-tabs v-model:activeKey="parKmzt">
              <a-tab-pane key="FORMAL" tab="正评试卷" />
              <a-tab-pane key="TEST" tab="试评试卷" />
            </a-tabs>
          </div>
        </template>
        <div class="row">
          <div class="data-content-table">
            <a-table
              size="middle"
              :scroll="{ x: undefined, y: dataSourcList.length ? 150 : undefined }"
              bordered
              :pagination="false"
              :dataSource="dataSourcList"
              :columns="columns"
            >
              <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'errorPaper'">
                  <span style="color: #ff576e">{{ record.errorPaper || 0 }}</span>
                </template>
              </template>
            </a-table>
          </div>
          <div class="btn-content">
            <QualityTestingCharts :chartInfo="chartInfo" />
          </div>
        </div>
      </a-card>
    </div>
    <a-card class="card">
      <div class="topInfo">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane key="0" tab="待质检质检" />
          <a-tab-pane key="1" tab="已质检试题" />
        </a-tabs>
        <span></span>
        <SearchGroup
          :labelOption="labelOption"
          @handleSearch="loadData(1)"
          @handleReset="reset"
          :searchOption="filterOption"
        />
      </div>
      <!-- :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" -->
      <a-table
        class="tablstyle"
        v-if="activeKey == '0'"
        :scroll="{ x: 1450 }"
        bordered
        :loading="loading"
        :pagination="false"
        :dataSource="list"
        :columns="PaperColumns"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex == 'index'">
            {{ (curPage - 1) * pageSize + (index + 1) }}
          </template>
          <template v-if="column.dataIndex == 'pyGcZt' && record.isYc">
            <span style="color: red"> 异常待处理 </span>
          </template>
          <template v-if="column.dataIndex == 'operation'">
            <a-button type="link" @click="goDetailPage(record)"> 查看 </a-button>
          </template>
        </template>
      </a-table>
      <a-table
        class="tablstyle"
        :scroll="{}"
        bordered
        v-else
        :loading="loading"
        :pagination="false"
        :dataSource="list"
        :columns="paperListColumn"
      >
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.dataIndex == 'index'">
            {{ (curPage - 1) * pageSize + (index + 1) }}
          </template>
          <template v-if="column.dataIndex == 'pyGcZt' && record.isYc">
            <span style="color: red"> 异常待处理 </span>
          </template>
          <template v-if="column.dataIndex == 'operation'">
            <a-button type="link" @click="goDetailPage(record)"> 查看 </a-button>
          </template>
        </template>
      </a-table>
      <a-pagination
        class="pagination"
        :show-total="total => `共 ${total} 条`"
        :show-size-changer="false"
        show-quick-jumper
        v-model:current="curPage"
        v-model:pageSize="pageSize"
        :total="total"
      />
    </a-card>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue'
import { allotAdministrationTeacher, getlistFishPaperList } from '/@/api/organization/collegeManage'
import { useList } from '/@/hooks/web/useList'
import { useGo } from '/@/hooks/web/usePage'
import QualityTestingCharts from './qualityTestingCharts.vue'

import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)
const go = useGo()

import { useUserStore } from '/@/store/modules/user'
const userStore = useUserStore()
const userInfo = computed(() => userStore.getUserInfo)

const activeKey = ref('0')
const parKmzt = ref('FORMAL')
const dataSourcList = ref([])
const labelOption = ref([
  {
    name: '质检科目',
    key: 'kmdm',
    selectOption: dataSourcList,
  },
  { name: '试题类型', key: 'stLx' },
])

const selectedRowKeys = ref([])

const onSelectChange = keys => {
  selectedRowKeys.value = keys
}

watch(
  () => parKmzt.value,
  async () => {
    defaultFilterOption['kmpyzt'] = parKmzt.value
    getinfoList()
  }
)

watch(
  () => activeKey.value,
  async () => {
    defaultFilterOption['activeKey'] = activeKey.value
    if (activeKey.value == '0') {
      labelOption.value = [
        {
          name: '质检科目',
          key: 'kmdm',
          selectOption: dataSourcList,
        },
        { name: '试题类型', key: 'stLx' },
      ]
    } else {
      labelOption.value = [
        {
          name: '质检科目',
          key: 'kmdm',
          selectOption: dataSourcList,
        },
        { name: '试题类型', key: 'stLx' },
        {
          name: '是否异常',
          key: 'isYc',
          selectOption: [
            { label: '是', value: true },
            { label: '否', value: false },
          ],
        },
      ]
    }
    loadData()
  }
)

const columns = ref([
  {
    title: '质检科目',
    dataIndex: 'kmdm',
    key: 'xymc',
    align: 'center',
    customRender: ({ record }) => {
      return `${record.kmdm}(${record.kmmc})`
    },
  },
  {
    title: '已质检试题数',
    dataIndex: 'hadNum',
    key: 'hadNum',
    align: 'center',
    customRender: ({ record }) => {
      if (record.hadNum) return `${record.hadNum}`
      else return `0`
    },
  },
  {
    title: '质检无误试题数',
    dataIndex: 'noErrorPaper',
    key: 'noErrorPaper',
    align: 'center',
    customRender: ({ record }) => {
      if (record.noErrorPaper) return `${record.noErrorPaper}`
      else return `0`
    },
  },
  {
    title: '质检异常试题数',
    dataIndex: 'errorPaper',
    key: 'errorPaper',
    align: 'center',
  },
])
const PaperColumns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: '80px',
    fixed: true,
  },
  {
    title: '题目',
    dataIndex: 'stLx',
    key: 'stLx',
    align: 'center',
    width: '120px',
  },
  {
    title: '二级题目',
    dataIndex: 'secondaryTitle',
    key: 'secondaryTitle',
    align: 'center',
    width: '200px',
  },
  {
    title: '评卷开始时间',
    dataIndex: 'ksdfTime',
    key: 'ksdfTime',
    align: 'center',
  },
  {
    title: '评阅结束时间',
    dataIndex: 'tjTime',
    key: 'tjTime',
    align: 'center',
  },
  {
    title: '评卷时长',
    dataIndex: 'pySc',
    key: 'pySc',
    align: 'center',
    customRender: ({ text }) => {
      let time = +new Date('2023-01-01') + 1000 * text
      return dayjs.duration(time || 1000).format('HH:mm:ss')
    },
  },
  {
    title: '题目总分',
    dataIndex: 'tmMf',
    key: 'tmMf',
    align: 'center',
  },
  {
    title: '题目评分',
    dataIndex: 'tmDf',
    key: 'tmDf',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    fixed: 'right',
  },
])

const paperListColumn = ref([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: '80px',
    fixed: true,
  },
  {
    title: '科目',
    dataIndex: 'kmDm',
    key: 'kmDm',
    align: 'center',
    width: '240px',
    customRender: ({ record, text }) => {
      return `(${text})${record.kmMc}`
    },
  },
  {
    title: '质检开始时间',
    dataIndex: 'beginTime',
    key: 'beginTime',
    align: 'center',
  },
  {
    title: '质检结束时间',
    dataIndex: 'endTime',
    key: 'endTime',
    align: 'center',
  },
  {
    title: '质检时长',
    dataIndex: 'zjSc',
    key: 'zjSc',
    align: 'center',
    customRender: ({ text }) => {
      let time = +new Date('2023-01-01') + 1000 * text
      return dayjs.duration(time || 1000).format('HH:mm:ss')
    },
  },
  {
    title: '题目总分',
    dataIndex: 'tmZf',
    key: 'tmZf',
    align: 'center',
  },
  {
    title: '题目评分',
    dataIndex: 'tmDf',
    key: 'tmDf',
    align: 'center',
  },
  {
    title: '质检状态',
    dataIndex: 'zjPjZt',
    key: 'zjPjZt',
    align: 'center',
    customRender: ({ record, text }) => {
      let obj = {
        reviewcorrect: '审查无误',
        labelexception: `标注异常(${record.ycXxCodeDesc || ''})`,
        withdrawreassessment: '撤回重评',
        leaderreevaluation: '系统管理员重评',
        otherreevaluation: '其他教师重评',
      }
      return obj[text]
    },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    align: 'center',
    fixed: 'right',
  },
])

const kmdmList = ref([])
const {
  reset,
  loadData,
  defaultFilterOption,
  filterOption,
  curPage,
  total,
  pageSize,
  list,
  loading,
} = useList(getlistFishPaperList, {
  immediate: false,
  defaultFilterOption: {
    kmYear: userInfo.value.kmYear,
    kmpyzt: parKmzt.value,
    kmdmList: kmdmList.value,
    activeKey: activeKey.value,
  },
})
const goDetailPage = record => {
  localStorage.setItem('activeKeyKey', activeKey.value)
  localStorage.setItem('activekmdmKey', filterOption.value.kmdm)
  go({
    name: `ReviewPaper`,
    query: {
      id: activeKey.value == '1' ? record.lsDfJlId : record.id,
      kmpyzt: parKmzt.value,
      zycId: record.zycAutoId || record.zycId,
      pySc: record.pySc,
      userId: record.jsxxId || record.userId,
    },
  })
}

const chartInfo = ref({})
const getinfoList = async () => {
  let { code, data } = await allotAdministrationTeacher({
    kmYear: userInfo.value.kmYear,
    Kmpyzt: parKmzt.value,
  })
  if (code == 200) {
    dataSourcList.value = data.qualityWorkRepList || []
    dataSourcList.value.forEach(element => {
      kmdmList.value.push(element.kmdm)
      element.label = element.kmmc
      element.value = element.kmdm
    })
    filterOption.value.kmdm = localStorage.getItem('activekmdmKey') || dataSourcList.value[0]?.kmdm
    localStorage.setItem('activekmdmKey', '')
    loadData()
    chartInfo.value = data || {}
  }
}


onMounted(async () => {
  getinfoList()
})
</script>
<style lang="less" scoped>
.teacher-container {
  // height: @c_height;
}
.card {
  border-radius: 8px;
}
.top-content {
  display: flex;
  margin-bottom: 15px;

  .title {
    font-weight: 700;
    font-size: 14px;
  }

  .data {
    width: 100%;
    flex-direction: row;
    &::v-deep(.ant-card-body) {
      padding: 0;
    }
  }

  .row {
    width: 100%;
    height: 210px;
    display: flex;
  }

  .data-content-table {
    width: 70%;
  }
  .btn-content {
    flex: 1;
  }
}

.topInfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  &::v-deep(.ant-tabs-nav) {
    margin: 0;
  }
}

.tablstyle {
  padding: 15px 0;
}

.modal-content {
  padding: 16px;
  font-size: 18px;
  .subject,
  .topic-type {
    color: #1890ff;
    font-weight: 700;
  }

  .title {
    font-weight: 700;
  }
  .hint-content {
    width: 98%;
    height: 60px;
    font-size: 16px;
    color: #e33c64;
    background-color: #f1efef;
  }
}
</style>
<style lang="less">
.teacher-info {
  .ant-pagination {
    margin-top: 20px;
  }
}
</style>
